<template>
  <el-config-provider :locale="zhCN" :message="messageConfig">
    <router-view />
  </el-config-provider>
</template>

<script setup>
import zhCN from "element-plus/dist/locale/zh-cn.mjs";
import { reactive } from "vue";

//全局信息配置
const messageConfig = reactive({
  max: 3,
  duration: 5000,
  grouping: true,
});
const debounce = (fn, delay) => {
  let timer;
  return (...args) => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn(...args);
    }, delay);
  };
};

const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
  constructor(callback) {
    callback = debounce(callback, 200);
    super(callback);
  }
};
</script>
<style lang="scss">
@import "@/assets/style/index";

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  width: 100%;
  height: 100%;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
